<template>
  <div>
    <p>你要购买商品的数量: {{ count }}</p>
    <!-- 1. 绑定事件
     语法: v-on:事件名="methods里函数名"
     语法: v-on:事件名="methods里函数名(值)"
     语法: @事件名="methods里函数名"
     -->
    <button v-on:click="addFn">+1</button>
    <button v-on:click="addCountFn(5)">+5</button>
    <button @click="subFn">减少1</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 1,
      //   count: 10,
    };
  },
  // 2. 定义函数
  methods: {
    //方法
    addFn() {
      // this代表组件对象, 对象上有export default导出的所有属性和值(data里变量和methods里的方法), 所以能用this调用他们
      this.count++;
    },
    addCountFn(num) {
      this.count = this.count + num;
    },
    subFn() {
      this.count--;
    },
  },
};
</script>

<style>
</style>